<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<%@include file="../common/header-assets.jsp"%>
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="content-page">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <h4 class="page-title float-left font-16">监测点管理</h4>

                        <ol class="breadcrumb float-right">
                            <li class="breadcrumb-item">数据管理</li>
                            <li class="breadcrumb-item active">监测点管理</li>
                        </ol>

                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="card-box">
                <form>
                    <div class="row form-inline">
                        <div class="form-group col-md-3">
                            <label for="s_provinceCode" class="col-md-4 col-form-label">省份</label>
                            <div class="col-md-8">
                                <select class="form-control select2" id="s_provinceCode" name="s_provinceCode" required>
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label for="s_cityCode" class="col-md-4 col-form-label">地级市</label>
                            <div class="col-md-8">
                                <select class="select2 form-control select2-multiple" id="s_cityCode" name="s_cityCode" required>
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label for="s_areaCode" class="col-md-4 col-form-label">县区</label>
                            <div class="col-md-8">
                                <select class="select2 form-control" id="s_areaCode" name="s_areaCode" required>
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label for="s_hiddenPointId" class="col-md-4 col-form-label">隐患点</label>
                            <div class="col-md-8">
                                <select class="select2 form-control" id="s_hiddenPointId" name="s_hiddenPointId" required>
                                </select>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="row form-inline">
                        <div class="form-group col-md-3">
                            <label for="s_onlineState" class="col-md-4 col-form-label">当前状态</label>
                            <div class="col-md-8">
                                <select class="select2 form-control" id="s_onlineState" name="s_onlineState" required>
                                    <option value="">所有</option>
                                    <option value="0">离线</option>
                                    <option value="1">在线</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <button type="button" id="search" class="btn btn-primary waves-light waves-effect w-xs">查询</button>
                        </div>
                    </div>
                </form>
                <hr >
                <div class="row">
                    <div class="col-sm-12">
                        <table id="datagrid" class="easyui-datagrid" style="height:auto;"
                               rownumbers="true" fitColumns="true" singleSelect="true"
                               data-options="url:'', pagination:true,pageSize:10,pageList:[10]">
                            <thead>
                                <tr>
                                    <th data-options="field:'deviceName', align:'center', width:100">监测点名称</th>
                                    <th data-options="field:'hiddenPointName', align:'center', width:120">所属隐患点</th>
                                    <th data-options="field:'onlineState', align:'center', width:120, formatter:showOnlineState">在线状态</th>
                                    <th data-options="field:'id', align:'center', width:150, formatter:operate">操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--  信息添加模态框 -->
<div id="alarmModal" class="modal fade bs-example-modal-lg" data-backdrop="static" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
    <form id="alarmForm" method="post" action="<c:url value='/alarmPara/save'/>" role="form">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h5 class="modal-title">报警参数</h5>
                </div>
                <div class="modal-body">
                    <p class="text-purple">基本信息</p>
                    <input id="alarm_id" name="alarm_id" type="hidden"/>
                    <input id="alarm_deviceId" name="alarm_deviceId" type="hidden"/>
                    <input id="alarm_monitorDeviceCode" name="alarm_monitorDeviceCode" type="hidden"/>
                    <div class="form-group row">
                        <label for="alarm_deviceName" class="col-sm-3 col-form-label">监测点名称<span class="text-danger">*</span></label>
                        <div class="col-sm-9">
                            <input class="form-control" id="alarm_deviceName" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="alarmParaName" class="col-sm-3 col-form-label">报警名称<span class="text-danger">*</span></label>
                        <div class="col-sm-9">
                            <input class="form-control" id="alarmParaName" name="alarmParaName" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="alarmTypeId" class="col-sm-3 col-form-label">报警等级<span class="text-danger">*</span></label>
                        <div class="col-sm-9">
                            <select class="form-control select2" id="alarmTypeId" name="alarmTypeId" required>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="dx" class="col-sm-3 col-form-label">北向位移(mm)</label>
                        <div class="col-sm-9">
                            <input class="form-control" id="dx" name="dx">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="dy" class="col-sm-3 col-form-label">东向位移(mm)</label>
                        <div class="col-sm-9">
                            <input class="form-control" id="dy" name="dy">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="dh" class="col-sm-3 col-form-label">高程位移(mm)</label>
                        <div class="col-sm-9">
                            <input class="form-control" id="dh" name="dh">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="dxy" class="col-sm-3 col-form-label">水平位移(mm)</label>
                        <div class="col-sm-9">
                            <input class="form-control" id="dxy" name="dxy">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="dxyh" class="col-sm-3 col-form-label">三维位移(mm)</label>
                        <div class="col-sm-9">
                            <input class="form-control" id="dxyh" name="dxyh">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">状态</label>
                        <div class="col-sm-9 p-t-5">
                            <label class="custom-control custom-radio">
                                <input name="alarm_useFlag" type="radio" class="custom-control-input" value="1" checked>
                                <span class="custom-control-indicator"></span>
                                <span class="custom-control-description">启用</span>
                            </label>
                            <label class="custom-control custom-radio">
                                <input name="alarm_useFlag" type="radio" class="custom-control-input" value="0">
                                <span class="custom-control-indicator"></span>
                                <span class="custom-control-description">禁用</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </form>
</div><!-- /.modal -->

<script type="text/javascript">
    $(function(){
        //初始化查询条件
        initQueryCondi();
        //初始化多选下拉列表
        $(".select2").select2();
        //报警参数信息窗体提交验证
        editValidataSubmit("alarmForm", beforeAlarmFormSubmit, "alarmModal", null);
    });

    //初始化查询条件
    let initQueryCondi = () =>{
        getDataByAjax("<c:url value='device/queryAll'></c:url>", "post", null, "json", {"dataType": "level"});
    }

    //回调函数
    var ajaxCallBack = (data, extraData) =>{
        if(extraData.dataType === "level"){
            levelData = data.obj;
            let pValue;
            //加载省份数据
            dealWithData(levelData, new Param("s_provinceCode", "provinceCode", "provinceName", null, null, null, true));
            //加载地级市数据
            pValue = $("#s_provinceCode").val()? new Array($("#s_provinceCode").val()) : selOptValToArr("s_provinceCode");
            dealWithData(levelData, new Param("s_cityCode", "cityCode", "cityName", "provinceCode", pValue, null, true));
            //加载县区数据
            pValue = $("#s_cityCode").val()? new Array($("#s_cityCode").val()) : selOptValToArr("s_cityCode");
            dealWithData(levelData, new Param("s_areaCode", "areaCode", "areaName", "cityCode", pValue, null, true));
            //加载隐患点数据
            pValue = $("#s_areaCode").val()? new Array($("#s_areaCode").val()) : selOptValToArr("s_areaCode");
            dealWithData(levelData, new Param("s_hiddenPointId", "hiddenPointId", "hiddenPointName", "areaCode", pValue, null, true));

            //加载监测点数据
            refreshContent();
        }
    }

    //省份下拉框改变事件
    $("#s_provinceCode").change(function () {
        let id = "s_cityCode";
        let pValue = $("#s_provinceCode").val()? new Array($("#s_provinceCode").val()) : selOptValToArr("s_provinceCode");
        //加载地级市
        dealWithData(levelData, new Param(id, "cityCode", "cityName", "provinceCode", pValue, null, true));
        $("#s_cityCode").change();
    });

    //地级市下拉框改变事件
    $("#s_cityCode").change(function () {
        let id = "s_areaCode";
        let pValue = $("#s_cityCode").val()? new Array($("#s_cityCode").val()) : selOptValToArr("s_cityCode");
        //加载县区
        dealWithData(levelData, new Param(id, "areaCode", "areaName", "cityCode", pValue, null, true));
        $("#s_areaCode").change();
    });

    //县区下拉框改变事件
    $("#s_areaCode").change(function () {
        let id = "s_hiddenPointId";
        let pValue = $("#s_areaCode").val()? new Array($("#s_areaCode").val()) : selOptValToArr("s_areaCode");
        //加载隐患点
        dealWithData(levelData, new Param(id, "hiddenPointId", "hiddenPointName", "areaCode", pValue, null, true));
        $("#s_hiddenPointId").change();
    });

    //搜索
    $("#search").click(function(){
        refreshContent();
    });

    let refreshContent = () =>{
        let provinceCode = $("#s_provinceCode").val();
        let cityCode = $("#s_cityCode").val();
        let areaCode = $("#s_areaCode").val();
        let hiddenPointId = $("#s_hiddenPointId").val();
        let onlineState = $("#s_onlineState").val();
        $("#datagrid").datagrid({
            url:"<c:url value='/device/query'/>",
            queryParams: {
                provinceCode,
                cityCode,
                areaCode,
                hiddenPointId,
                onlineState
            }
        });
    }

    //显示监测点的在离线状态
    function showOnlineState(value){
        let html = "";
        if(value === 0){
            html = "<span style='color: red'>离线</span>";
        }else if(value === 1){
            html = "<span style='color: green'>在线</span>";
        }
        return html;
    }

    //操作
    function operate(value, rowData){
        let deviceName = rowData.deviceName;
        let str = "";
        let alarm = "<input type='button' class='btn btn-link' value='报警' onclick=alarm('"+ value +"','"+ deviceName +"')>";
        str += alarm;
        return str;
    }

    //报警
    let alarm = (deviceId, deviceName) =>{
        clearEditForm("alarmForm");
        $("#alarm_deviceId").val(deviceId);
        $("#alarm_deviceName").val(deviceName);
        $("#alarmModal").modal("show");
        loadAlarmPara(deviceId, "1");
    }

    //报警等级改变事件
    $("#alarmTypeId").change(function () {
        cleanAlarmParam();
        let alarmTypeId = $(this).val();
        let deviceId = $("#alarm_deviceId").val();
        loadAlarmPara(deviceId, alarmTypeId);
    })

    //清楚报警信息参数框
    let cleanAlarmParam = ()=>{
        $("#alarmParaName").val("");
        $("#dx").val("");
        $("#dy").val("");
        $("#dh").val("");
        $("#dxy").val("");
        $("#dxyh").val("");
    }

    //获取报警参数信息
    let loadAlarmPara = (deviceId, alarmTypeId) =>{
        $.post("<c:url value='/alarmPara/getByObj'/>",{
            deviceId,
            alarmTypeId
        },function(result){
            if(result && result.obj){
                let data = result.obj;
                $("#alarm_id").val(data.id);
                $("#alarmParaName").val(data.alarmParaName);
                initSingleSelect("alarmTypeId", data.alarmTypeId + "");
                $("#dx").val(data.dx);
                $("#dy").val(data.dy);
                $("#dh").val(data.dh);
                $("#dxy").val(data.dxy);
                $("#dxyh").val(data.dxyh);
                //状态
                $("input[type='radio'][name='alarm_useFlag'][value="+ data.useFlag +"]").prop("checked", true);
            }else{
                $("#alarm_id").val("");
                initSingleSelect("alarmTypeId", alarmTypeId);
            }
        }, "json")
    }

    //报警参数信息提交前表单处理
    let beforeAlarmFormSubmit = formData =>{
        let id = $("#alarm_id").val();
        let deviceId = $("#alarm_deviceId").val();
        let useFlag = $("input[name='alarm_useFlag']:checked").val();
        formData.push({ name: "id", value: id});
        formData.push({ name: "deviceId", value: deviceId});
        formData.push({ name: "useFlag", value: useFlag});
    }
</script>